* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.charging {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(016, 16, 16);
    filter: contrast(30);
}

/* 显示电量 */
.electricity {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    color: #FFF;
    font-size: 30px;
}

.main {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 46% 45% 40% 47%;
    background-color: rgb(5, 142, 75);
    animation: rotate 20s linear infinite;
    filter: blur(10px);
}

.main::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    background-color: rgb(016, 16, 16);
    border-radius: 50%;
}



@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(3600deg);
    }
}

.up {
    position: absolute;
    bottom: -100px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    filter: blur(20px);
    background-color: rgb(5, 142, 75);
    animation-duration: 5s;
    animation-timing-function: li;
}

.charging span:nth-of-type(1) {
    left: 47.5%;
    animation: up 2s 2s linear infinite;
}

.charging span:nth-of-type(2) {
    left: 48%;
    animation: up 2.5s 1s linear infinite;
}

.charging span:nth-of-type(3) {
    left: 46.5%;
    animation: up 3s 0s linear infinite;
}

.charging span:nth-of-type(4) {
    left: 48%;
    animation: up 1s 0s linear infinite;
}

.charging span:nth-of-type(5) {
    left: 47%;
    animation: up 1.5s 1s linear infinite;
}

.charging span:nth-of-type(6) {
    left: 46%;
    animation: up 3s 0s linear infinite;
}

.charging span:nth-of-type(7) {
    left: 50%;
    animation: up 2s 1s linear infinite;
}


.charging span:nth-of-type(8) {
    left: 46.5%;
    animation: up 1.5s 2s linear infinite;
}

.charging span:nth-of-type(9) {
    left: 47.5%;
    animation: up 1.5s 1.5s linear infinite;
}

.charging span:nth-of-type(10) {
    left: 49%;
    animation: up 3s 0s linear infinite;
}

/* .charging span:nth-of-type(11) {
    left: 46.5%;
    animation: up 3s 0s linear infinite;
}

.charging span:nth-of-type(12) {
    left: 48%;
    animation: up 2s 1s linear infinite;
}

.charging span:nth-of-type(13) {
    left: 50%;
    animation: up 1.5s 2s linear infinite;
}

.charging span:nth-of-type(14) {
    left: 49%;
    animation: up 1.5s 1.5s linear infinite;
}

.charging span:nth-of-type(15) {
    left: 48.5%;
    animation: up 3s 0s linear infinite;
} */
/* 向上冒泡 */
@keyframes up {
    0% {
        transform: scale(0.6);
        bottom: 0;
    }

    100% {
        transform: scale(0.4);
        bottom: 33%;
    }
}

/* 底部盒子 */
.origin {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 150px;
    height: 50px;
    transform: translate(-50%, 0);
    border-radius: 70% 70% 30% 30%;
    background-color: rgb(5, 142, 75);
    filter: blur(10px);
}